<template>
    <div class="page-container page-customerManage">
        <div class="company-manager">
            <div class="operations">
                <div class="search-user">
                    <el-input v-model="searchKey" class="search-input" placeholder="企业名称" style="width: 300px;"></el-input>
                    <div class="search-btn" @click="getCompanyModel">查询</div>
                </div>
            </div>
            <el-table :data="companyList" border tooltip-effect="dark" style="width: 100%;">
                <el-table-column label="编号" align="center" width="60">
                    <template slot-scope="scope">
                        <div>{{ scope.row.companyId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="companyName" align="center" label="企业名称">
                </el-table-column>
                <el-table-column prop="appName" align="center" label="小程序名称">
                </el-table-column>
                <el-table-column align="center" label="CRM企业服务开关">
                    <template slot-scope="scope">
                        <el-switch @change="switchClick(scope.row)" v-model="scope.row.enterpriseServicesSwitch"
                            active-text="打开" inactive-text="关闭">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="增值服务开关">
                    <template slot-scope="scope">
                        <el-switch @change="switchClick(scope.row)" v-model="scope.row.switchState" active-text="打开"
                            inactive-text="关闭">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="用户授权开关">
                    <template slot-scope="scope">
                        <el-switch @change="switchClick(scope.row)" v-model="scope.row.infoSwitch" active-text="打开"
                            inactive-text="关闭">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="手机授权开关">
                    <template slot-scope="scope">
                        <el-switch @change="switchClick(scope.row)" v-model="scope.row.phoneSwitch" active-text="打开"
                            inactive-text="关闭">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { findCompanyModelSwtich, switchCompanyModel } from '@/api/api.js';
import { str2date, getCookie } from '@/utils/util.js';
import { serverUrl } from "@/utils/server.js";
const Qs = require('qs');
export default {
    data() {
        return {
            total: 0,
            pageNum: 1,
            dialogFormVisible: false,
            switchVideo: false,
            searchKey: '',
            name: '',
            phone: '',
            companyList: [],
            companyListTemp: [{ companyName: '壹立科技', companyId: '1', cardNumber: 12, videoSize: 12, appName: '名片', phone: '18782546845' },
            { companyName: '清风科技', companyId: '2', cardNumber: 14, videoSize: 16, appName: 'CRM', phone: '18782546841' }
            ],
            rules: {
                videoSize: [
                    { required: true, message: '请输入视频限制数量', trigger: 'blur' },
                    { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
                ],
            },
            setSermissionsform: {
                companyName: '',
            },
            form: {
                videoSize: '',
                companyId: ''
            }
        };
    },
    created() {
        this.getCompanyModel();
    },
    mounted() {
    },
    methods: {
        editVideoSize(row) {
            this.form = row;
            this.dialogFormVisible = true;
        },
        getCompanyModel() {
            if (serverUrl.baseURL.indexOf("/test/") != -1) {
                this.companyList = this.companyListTemp;
            } else {
                let params = {
                    pageNum: this.pageNum,
                    companyName: this.searchKey,
                    name: this.name,
                    phone: this.phone
                }
                findCompanyModelSwtich(params).then(res => {
                    if (res.code == 200) {
                        this.total = res.data.pageInfo.total;
                        this.companyList = res.data.pageInfo.list;
                    } else {
                        this.companyList = [];
                        this.$message({
                            message: res.message,
                            type: 'warning'
                        });
                    }
                }).catch(err => {
                    this.companyList = [];
                })
            }
        },
        switchClick(row) {
            if (serverUrl.baseURL.indexOf("/test/") == -1) {
                let params = row;
                switchCompanyModel(params).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'sussess'
                        });
                        setTimeout(() => {
                            this.getCompanyModel();
                        }, 200)
                    }
                }).catch(err => {
                    this.$message({
                        message: err.message,
                        type: 'warning'
                    });
                })
            }
        },
        handleCurrentChange() {
            this.getCompanyModel()
        },
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .page {
        padding: 10px 0;
        text-align: center;
    }
    .company-manager {
        padding: 0 20px;
        .operations {
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            .operation-btns {
                display: flex;
                div {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
            .search-user {
                display: flex;
                .search-input {
                    height: 40px;
                    margin-right: 10px;
                    .el-input__inner {
                        height: 40px;
                    }
                }
                .search-btn {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
        }
    }
}
</style>
